<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-edit" @click.native="addsite">新增批次</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="formInline.flag" placeholder="请选择">
              <el-option
                v-for="item in pcname"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formInline.val" placeholder="请输入对应内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click.native="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content_body">
      <ul>
        <li class="left_">
          <el-tree :data="datagoods" :props="defaultProps" @node-click="handleNodeClick" />
        </li>
        <li class="right_">
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%;margin-top:30px;"
          >
            <el-table-column
              prop="pname"
              label="批次名称"
              width="120"
            />
            <el-table-column
              prop="pnum"
              label="批次编号"
              width="180"
            />
            <el-table-column align="center" label="二维码" width="130">
              <template slot-scope="scope">
                <img :src="scope.row.city" alt="" class="imas">
              </template>
            </el-table-column>
            <el-table-column
              prop="plook"
              label="二维码扫描次数"
              width="100"
            />
            <el-table-column align="center" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1">启用中</el-tag>
                <el-tag v-if="scope.row.status == 2" type="danger">停用中</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间"
              width="180"
            />
            <el-table-column align="center" label="操作" width="420">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope)">导出二维码</el-button>
                <el-button v-if="scope.row.status == 1" type="warning" size="small" @click="handfreezing(scope.$index,tableData,scope)">停用</el-button>
                <el-button v-if="scope.row.status == 2" type="primary" size="small" @click="handfreezing(scope.$index,tableData,scope)">启用</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index,tableData,scope)">删除批次
                </el-button>
                <el-button type="success" size="small" plain @click="addchukudan(scope)">新增出库单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </li>
      </ul>
    </div>
    <el-pagination
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="新增批次" width="80%" :visible.sync="piciflag">
      <el-form
        ref="ruleForm"
        :label-position="labelPosition"
        :rules="rules"
        label-width="120px"
        :model="formLabelAlign"
      >
        <el-form-item label="所属产品" prop="pid">
          <el-select v-model="formLabelAlign.pid" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.ename"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="批次名称" prop="pname">
          <el-input v-model="formLabelAlign.pname" />
        </el-form-item>
        <el-form-item label="批次编号" prop="pnum">
          <el-input v-model="formLabelAlign.pnum" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="piciflag = false">取 消</el-button>
        <el-button type="primary" @click="Addpic('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该批次，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletegoodsflag = false">取 消</el-button>
        <el-button type="primary" @click="DetermineGoods">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增出库单" width="80%" :visible.sync="chukuflag">
      <el-form
        ref="ruleForm"
        :label-position="labelPosition"
        :rules="chukurules"
        label-width="120px"
        :model="formchuku"
      >
        <el-form-item label="出库单号" prop="num">
          <el-input v-model="formchuku.num" />
        </el-form-item>
        <el-form-item type="number" label="出库数量" prop="number">
          <el-input v-model="formchuku.number" />
        </el-form-item>
        <el-form-item label="出库备注" prop="remark">
          <el-input v-model="formchuku.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chukuflag = false">取 消</el-button>
        <el-button type="primary" @click="Addchuku('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Documentation',
  components: {},
  data() {
    return {

      // 出库单
      chukuarrid: '', // 出库Object
      chukuflag: false,
      chukurules: {
        pid: [
          { required: true, message: '请选择批次', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入出库单号', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入出库数量', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入出库备注', trigger: 'blur' }
        ]
      },
      formchuku: {
        bid: '',
        num: '',
        number: '',
        remark: ''
      },

      pcname: [{
        value: 'name',
        label: '批次名称'
      }, {
        value: 'number',
        label: '批次编号'
      }, {
        value: 'all',
        label: '全部'
      }],
      options: [],
      value: '',
      deletegoodsflag: false,
      goodsindex: 0,
      goodsrows: [],
      pageid: '',
      loading: true, //
      pagesize: 3, // 每页条数
      total: 0, // 总条目数
      rules: {
        pid: [
          { required: true, message: '请选择产品', trigger: 'blur' }
        ],
        pname: [
          { required: true, message: '请输入批次名称', trigger: 'blur' }
        ],
        pnum: [
          { required: true, message: '请输入批次编号', trigger: 'blur' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      datagoods: [],
      pidval: [],
      labelPosition: 'right',
      formLabelAlign: {
        pid: '',
        pname: '',
        pnum: '',
        type: '1',
        children: []
      },
      piciflag: false,
      formInline: {
        flag: '',
        val: ''
      },
      tableData: [],
      mobanarr: [] // 模板
    }
  },
  created() {
    this.GetTemp()
    this.goodscontent()
  },
  mounted() {

    // 生命周期
    // console.log(this.tableData);
  },
  methods: {
    addchukudan(val) { // 新增出库单
      this.chukuflag = true
      this.chukuarrid = val.row.id.toString()
      this.formchuku = {
        bid: '',
        num: '',
        number: '',
        remark: ''
      }
    },
    Addchuku(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formchuku.bid = this.chukuarrid
          this.$apifn.AddoutBounds(this.formchuku).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.chukuflag = false
              this.$message({
                message: '新增出库单成功',
                type: 'success'
              })
            }
          }).catch((res) => {
          })
        } else {
          return false
        }
      })
    },
    handfreezing(index, rows, val) {
      let status = ''
      // console.log(val.row.status);
      switch (val.row.status) {
        case '1':
          status = '2'
          break
        case '2':
          status = '1'
          break
      }

      const dataupdate = {
        'id': val.row.id,
        'upload': { 'status': status }
      }

      this.$apifn.EditBatches(dataupdate).then((ref) => {
        if (ref.data.Response.code == 200) {
          rows[index].status = status
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // this.piciflag = false
        }
      }).catch((res) => {
      })
    },
    GetTemp() {
      this.$apifn.GetTemp().then((ref) => {
        if (ref.data.Response.code == 200) {
          this.mobanarr = ref.data.Response.data
        }
      }).catch((res) => {
      })
    },
    Addpic(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data_object = {}
          this.options.forEach((item) => {
            if (item.id == this.formLabelAlign.pid) {
              data_object = item
            }
          })
          switch (data_object.type) {
            case '1': // 养殖
              this.formLabelAlign.children = this.mobanarr.y
              break
            case '2': // 种植
              this.formLabelAlign.children = this.mobanarr.z
              break
          }

          this.$apifn.AddNatches(this.formLabelAlign).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.$message({
                message: '添加批次成功',
                type: 'success'
              })
              this.batchlist(this.formLabelAlign.pid, 1)
              this.formLabelAlign = {
                pid: '',
                pname: '',
                pnum: '',
                type: '1',
                children: []
              }
              this.piciflag = false
            }
          }).catch((res) => {
            this.$message({
              message: res.request.response.errors.pnum,
              type: 'danger'
            })
          })
        } else {
          return false
        }
      })
    },
    handleNodeClick(data) { // 编辑导航栏点击
      this.formLabelAlign.pid = data.id
      // console.log(data);
      this.batchlist(data.id, 1)
    },
    onSubmit() { // 搜索批次
      if (this.formInline.flag == '') {
        this.$notify({
          title: '警告',
          message: '请选择搜索类型',
          type: 'warning'
        })
        return false
      }
      if (this.formInline.val == '') {
        this.$notify({
          title: '警告',
          message: '请输入搜索内容',
          type: 'warning'
        })
        return false
      }
      this.$apifn.SearchBatches({ 'type': this.formInline.flag, 'val': this.formInline.val }).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData = ref.data.Response.data
        }
      }).catch((res) => {
      })
    },
    addsite() { // 新增批次
      this.piciflag = true
      // this.$router.push({ path: '/addsite/addsitePage' });
    },

    goodscontent() { // 商品导航分类
      this.$apifn.ShowBatches({ 'limit': '1000' }, '1').then((ref) => {
        if (ref.data.Response.code == 200) {
          this.loading = false
          this.options = ref.data.Response.data.data
          console.log(this.options)
          ref.data.Response.data.data.forEach((item) => {
            this.datagoods.push({ 'label': item.ename, 'id': item.id, 'batch': item.batch })
          })
          this.batchlist(ref.data.Response.data.data[0].id, 1)
        }
      }).catch((res) => {

      })
    },
    handleCurrentChange(val) { // 分页
      this.loading = true
      this.batchlist(this.formLabelAlign.pid, val)
    },
    datagod(val) {
      val.forEach((item) => {
        this.datagoods.push({ 'label': item.ename, 'id': item.id })
      })
    },
    batchlist(pid, e) { // 批次列表
      this.$apifn.PidShowBatches({ 'limit': this.pagesize, 'pid': pid }, e).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData = ref.data.Response.data.data
          this.total = ref.data.Response.data.total
          this.loading = false
        }
      }).catch((res) => {
      })
    },
    handleDelete(index, rows, val) { // 删除
      this.goodsindex = index
      this.goodsrows = val.row
      this.deletegoodsflag = true
    },
    DetermineGoods() {
      this.$apifn.DeleteBatches({ 'id': this.goodsrows.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData.splice(this.goodsindex, 1)
          this.$message({
            message: '成功删除该批次',
            type: 'success'
          })
          this.deletegoodsflag = false
        }
      }).catch((res) => {
      })
    },
    deletebatch() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .red_ {
    color: red;
  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 167px;
    }
    .add_zhandian {
      width: 100%;
      height: 54px;
    }
    .selech {
      width: 100%;
      height: 109px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }
    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }
    .selech {
      width: 79%;
      height: 100%;
      float: left;
    }
    .content_body {
      width: 100%;
      height: 650px;
    }
    .content_body ul {
      width: 100%;
      height: 100%;
    }
    .content_body ul li {
      float: left;
      height: 100%;
    }
    .left_ {
      width: 20%;
    }
    .right_ {
      width: 79%;
    }
  }

  .app-container {
    .roles-table {
      margin-top: 30px;
    }
    .permission-tree {
      margin-bottom: 30px;
    }
  }

  .imas {
    width: 50px;
    height: 50px;
  }
</style>
